<template>
  <view class="bottom-button padding-lr-30 padding-tb-20 width-full" :class="{'margin-top-50': !fixed}" :style="{ position:fixed ? '' : 'relative' }">
    <view class="flex-row justify-between">
      <by-button :text="text" :width="width" :height="height" :type="type" :bold="bold" :pain="pain" :font-size="fontSize" :font-color="fontColor" @click="$emit('click')"/>
      <slot name="btn"></slot>
    </view>
    <by-safe-area-bottom></by-safe-area-bottom>
  </view>
</template>

<script setup lang="ts">
import useSystemStore from '@/store/system'
import { px } from '@/common/util'

interface IProps{
  text?: string
  fontSize?: string
  fontColor?: string
  height?: string
  width?: string
  pageHeight?: number
  type: string
  pain: boolean
  bold: boolean
}

const props = withDefaults(defineProps<IProps>(), {
  type: 'primary',
  pain: false,
  bold: false
})

const $emit = defineEmits(['click'])

const fixed = ref(true)
watch(
  () => props.pageHeight,
  (e) => {
    const systemStore = useSystemStore()
    const number = px(40 + 50 + (props.height ? parseInt(props.height) : 60)) + systemStore.safeBottom
    if (e && e + number > systemStore.screenHeight) fixed.value = false
  }
)
</script>

<style scoped lang="scss">
.bottom-button{
  @include position(fixed, $left: 0, $bottom: 0, $z-index: 10);
}
</style>
